<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /*
            LocalStorage
                1, HTML5设计出来专门用于浏览器存储的
                2, 大小为5M左右
                3, 仅在客户端使用，不和服务端通信
                4, 接口封装较好
                5, 浏览器本地缓存方案
            SessionStorage
                1, 会话级别的浏览器储存
                2, 大小5M左右
                3, 仅在客户端使用，不和服务器进行通信
                4, 接口封装较好
                5, 对于表单信息的维护
            IndexedDB
                IndexedDB是一种低级API，用于客户端存储大量结构化数据
                该API使用索引对数据高性能搜索
                为应用创建离线版本

            
            if (window.localStorage){
                localStorage.setItem("name", "world")
                localStorage.setItem("gender", "famale")
                console.log("name is " + localStorage.getItem("name"))
            }
        */
        var testContent = localStorage.getItem("test")
        if (testContent){
            eval(testContent)
        } else {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = callback;
            xhr.open("GET", "./test.js", true);
            xhr.send();

            function callback(){
                if (xhr.readyState == 4 && xhr.status == 200){
                    var responseText = xhr.responseText
                    eval(responseText)
                    localStorage.setItem("test", responseText)
                } else {
                    console.log("request was unsuccessful")
                }
            }
        }

    </script>
</body>
</html>